<template>

  <div style="margin-left: 500px">
    <div style="width:80%;margin:0 auto;padding: 10px">
      <label styly="width:150px">年份:</label>
      <el-input v-model="onyear" placeholder="请输入关键字" style="width: 30%"></el-input>
    </div>
    <div style="width:80%;margin:0 auto;padding: 10px">
      <label styly="width:150px">成绩:</label>
      <el-input v-model="grade" placeholder="请输入关键字" style="width: 30%"></el-input>
    </div>
    <div style="width:80%;margin:0 auto;padding: 10px">
      <label styly="width:150px">科目:</label>
      <el-input v-model="branch" placeholder="请输入关键字" style="width: 30%"></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
    </div>
<!--    <el-form ref="form" :model="form" class="oneContainer">-->
<!--      <h3 style="margin: 0 auto;text-align:center;font-size:25px">查询位次</h3>-->
<!--      <el-form-item label="省份" style="padding-top: 10px">-->
<!--        <el-select v-model="form.province" >-->
<!--&lt;!&ndash;          <el-option placeholder="请选择" ></el-option>&ndash;&gt;-->
<!--          <el-option v-for="item in province" :key="item.id" :label="item.value" :value="item.id">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="年份">-->
<!--        <el-select v-model="form.onyear" prop="onyear" @change="changeonyear($event.target.value)">-->
<!--&lt;!&ndash;          <el-option placeholder="请选择" ></el-option>&ndash;&gt;-->
<!--          <option value="0">2017</option>-->
<!--          <option value="1">2018</option>-->
<!--          <option value="2">2019</option>-->
<!--          <option value="3">2020</option>-->
<!--          <option value="4">2021</option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="选择科目" prop="branch">-->
<!--          <el-select v-model="form.branch" multiple placeholder="请选择" @change="changebranch">-->

<!--          </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="分数" prop="grade">-->
<!--        <el-input-->
<!--          placeholder="请输入内容"-->
<!--          v-model="form.grade"-->
<!--          clearable style="width:70%">-->
<!--        </el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item style="padding-left: 35px">-->
<!--        <el-button type="primary" style="width: 30%" @click="load">查询</el-button>-->
<!--        <el-button type="info" style="width: 30%" @click="re">重置</el-button>-->
<!--      </el-form-item>-->
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%">
        <span>你的成绩位于：{{seating}}名</span>
      </el-dialog>
<!--    </el-form>-->
  </div>
</template>

<script>
 import request from '../utils/request'

 export default {
   data () {
     return {
       loading: true,
       tableData: [],
       onyear: '',
       grade: '',
       branch: '',
       seating: '',
       form: {},
       dialogVisible: false
     }
   },
   methods: {
     changebranch (value) {
       console.log(value)
       // const checkedItem = this.options.find((a) => a.id === value)
       // this.form.branch = checkedItem.branch
     },
     changeonyear (value) {
       console.log(value)
       // const checkedItem = this.onyear.find((a) => a.id === value)
       // this.form.onyear = checkedItem.onyear
     },
     re () {

     },
     load () {
       this.dialogVisible = true
       this.loading = true
       request.get('api/selectone', {
         params: {
           onyear: this.onyear,
           grade: this.grade,
           branch: this.branch,
           seating: this.seating
         }
       }).then(res => {
         this.loading = false
         this.onyear = res.data.onyear
         this.grade = res.data.grade
         this.branch = res.data.branch
         this.seating = res.data.seating
         console.log(this.seating)
         console.log('11+' + this.grade)
         // console.log(res.data.records)
         // console.log(res.data)
       })
     }

   }
 }
</script>

<style>
.oneContainer{
  border-radius: 15px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 500px;
  padding: 35px 75px 35px 75px;
  background: #fff;
  border: 1px solid #5f5750;
  box-shadow: 0 0 25px #665e57;
}
</style>
